<template>
  <div style="text-align: left">
    <h1 style="text-align: left">
      <img src="../../assets/img/order.png" style="width: 25px;height: 25px" flex>
      代付订单列表
    </h1>
    <hr style="margin-top: 10px">
    <!--查询按钮-->
    <div style="margin-top: 10px">
      <span>用户：</span>
    <el-select size="small" v-model="orderInfo.userId" clearable placeholder="请选择">
      <el-option v-for="item in userAsk" :key="item.value" :label="item.value" :value="item.lable">
      </el-option>
    </el-select>
      <span class="search">商户：</span>
      <el-select size="small" v-model="orderInfo.businessId" clearable placeholder="请选择商户">
        <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <span class="search">订单状态:</span>


      <el-select v-model="orderInfo.status" size="small" clearable placeholder="请选择">
        <el-option v-for="item in orderType" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <span class="search">起始时间:</span>

        <el-date-picker style="width: 10%" size="small" v-model="orderInfo.beginDate" @change="change" type="datetime" placeholder="选择日期时间"
                        class="width1">
        </el-date-picker>

        <span class="search">结束时间:</span>

          <el-date-picker style="width: 10%" size="small" v-model="orderInfo.endDate" @change="change2" type="datetime" placeholder="选择日期时间"
                          class="width1">
          </el-date-picker>


      <el-button class="search" type="primary" size="small" @click="queryOrderList(0)">查询</el-button>
      <el-button type="primary" size="small" @click="queryOrderList(1)">今天</el-button>
      <el-button type="primary" size="small" @click="queryOrderList(2)">昨天</el-button>
  </div>
  <!--列表表格-->
    <div style="margin-top: 1.5%">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column type="index" width="60" label="ID" fixed>
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="dfBusinessName"
          label="代付商户名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="person"
          label="持卡人"
          width="120">
        </el-table-column>
        <el-table-column
          prop="cardNo"
          label="卡号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="bank"
          label="银行名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="backup1"
          label="支行名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="backup2"
          label="开户省"
          width="120">
        </el-table-column>
        <el-table-column
          prop="backup3"
          label="开户市"
          width="120">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="realAmount"
          label="代付金额"
          width="120">
        </el-table-column>
        <el-table-column
          prop="amount"
          label="到账金额"
          width="120">
        </el-table-column>
        <el-table-column
          prop="orderNo"
          label="订单编号"
          width="320">
        </el-table-column>
        <el-table-column
          prop="outOrderNo"
          label="下游订单号"
          width="320">
        </el-table-column>
        <el-table-column
          prop="upOrderNo"
          label="上游订单号"
          width="320">
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="创建日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="finishDate"
          label="完成日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态"
          width="100">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="allow(scope.row)" type="text" size="small">同意</el-button>
            <el-button @click="unAllow(scope.row)" type="text" size="small">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="orderInfo.pageNumber"
        :page-sizes="[5, 8, 10, 13, 15]"
        :page-size="orderInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import daifuType from '../../assets/daifuType'
  import dateformat from 'dateformat'
  export default{

    data(){
      return {
        userAsk:[],
        businessList:[],
        orderType:daifuType,
        orderInfo:{
          userId:undefined,
          businessId:undefined,
          status:undefined,
          beginDate:undefined,
          endDate:undefined,
          pageSize: 5,
          pageNumber: 1,
        },

        tableData:[],
        total: 1,
      }
    },
    created(){
      this.getUserList();
      this.getBusinessList();
    },
    methods:{
      handleCurrentChange(val) {
        this.orderInfo.pageNumber = val;
        this.queryOrderList(10)
      },
      handleSizeChange (val) {
        this.orderInfo.pageSize = val;
        this.queryOrderList(10)
      },
      unAllow(row){
        let params = {
          id:row.id,
        }
        this.$api.unAllowDfOrder(params).then(res =>{
          if (res.code==="000000"){
            this.$message.success('拒绝该订单成功！')
            this.queryOrderList();
          }
        })
      },
      allow(row){
        let params = {
          id:row.id
        }
        this.$api.sendDfOrder(params).then(res =>{
          if (res.code==="000000"){
            this.$message.success('同意该订单成功！')
            this.queryOrderList();
          }
        })
      },
      queryOrderList(mes) {
        if (this.orderInfo.beginDate == "") {
          this.orderInfo.beginDate = 0
        }
        if (this.orderInfo.endDate == "") {
          this.orderInfo.endDate = Date.now()
        }
        if (mes != 10) {
          for (let item in this.countObj) {
            console.log(this.countObj[item])
            this.countObj[item] = 0
          }
        }

        this.loading1 = true;

        var timeStamp = new Date(new Date().setHours(0, 0, 0, 0)) / 1000;
        if (mes == 1) {
          //今天的
          this.orderInfo.beginDate = timeStamp * 1000
          this.orderInfo.endDate = undefined
          this.orderInfo.pageNumber = 1
        }
        if (mes == 2) {
          //昨天的
          this.orderInfo.beginDate = timeStamp * 1000 - 86400 * 1000
          this.orderInfo.endDate = timeStamp * 1000
          this.orderInfo.pageNumber = 1
        }
        if (mes == 9) {
          this.loading1 = false;
          if(this.orderInfo.endDate && this.orderInfo.beginDate){
            if (this.orderInfo.endDate - this.orderInfo.beginDate > 86400 * 3 *1000){
              this.$message.error('选择时间不能超过3天')
            }else{
              window.open('/ddj/order/export?' + this.linkUrlParams(this.orderInfo))
            }
          } else {
            this.$message.info('请选择开始时间和结束时间')
          }
        } else {
          this.$api.getDfOrderList(this.orderInfo).then(res => {
            if (res.code == '000000') {
              this.loading1 = false;
              this.total = res.data.totalRow;
              this.tableData = res.data.list;
              this.tableData.forEach(item => {
                if (item.createDate) {
                  let date = new Date(item.createDate);
                  item.createDate = dateformat(date, 'yyyy-mm-dd HH:MM')
                }
                if (item.finishDate) {
                  let date = new Date(item.finishDate);
                  item.finishDate = dateformat(date, 'yyyy-mm-dd HH:MM')
                }
                switch (item.status) {
                  case 11:
                    item.status = '待审核';
                    break;
                  case 9:
                    item.status = '代付成功';
                    break;
                  case 10:
                    item.status = '代付失败';
                    break;
                  case 1:
                    item.status = '待到账';
                    break;
                  default :
                    item.status ='未知状态';
                    break;
                }
              })
              this.$message({
                type: 'success',
                message: '查询成功'
              })
            }
          })
        }


      },
      change(val) {
        if (val === undefined) {
          this.orderInfo.beginDate = val
        } else if (val && val !== undefined && val !== '') {
          this.orderInfo.beginDate = Date.parse(val);
        } else {
          this.orderInfo.beginDate = undefined
        }
      },
      change2(val) {
        if (!val) {
          this.orderInfo.endDate = undefined
        } else {
          this.orderInfo.endDate = Date.parse(val);
        }
      },
      getBusinessList(){
        let params = {
          pageSize:9999
        }
        this.$api.getDfBusinessList(params).then(res => {
          if (res.code == '000000') {
            this.businessList = res.data.list;

          }
        })
      },
      getUserList() {
        let params = {
          pageSize: 9999
        }
        this.$api.getUserList(params).then(res => {
          if (res.code == '000000') {
            let mid = res.data.list;
            mid.forEach(item => {
              this.userAsk.push({
                value: item.username,
                lable: item.id
              })
            })
          }
        })
      }
    }
  }
</script>

<style>
.search{
  margin-left: 0.5%;
}

</style>
